SignalR হলো একটি লাইব্রেরি যা অ্যাসিঙ্ক্রোনাস, রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা রিয়েল-টাইমে ট্রান্সফার করতে সহায়তা করে, অর্থাৎ ক্লায়েন্টের কোনো অ্যাকশন বা সার্ভারের কোনো পরিবর্তন পলিং ছাড়াই রিয়েল-টাইমে ক্লায়েন্টের কাছে পৌঁছায়। SignalR সাধারণত চ্যাট অ্যাপ্লিকেশন, লাইভ স্টক মার্কেট অ্যাপ্লিকেশন, এবং গেমিং অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।

ASP.Net Core SignalR এর সাথে Angular বা React এর ইন্টিগ্রেশন খুবই সহজ এবং এটি আপনাকে রিয়েল-টাইম ডেটা আপডেটের সুবিধা দেয়। এই টিউটোরিয়ালে আমরা দেখব কীভাবে ASP.Net Core SignalR সার্ভার এবং Angular/React ক্লায়েন্ট অ্যাপ্লিকেশন একত্রে কাজ করে।

১. SignalR এবং Angular/React ইন্টিগ্রেশন কেন প্রয়োজন?

1. রিয়েল-টাইম ডেটা: SignalR ব্যবহার করে আপনি রিয়েল-টাইম ডেটা পাঠাতে পারেন, যা Angular বা React অ্যাপ্লিকেশনগুলোতে সরাসরি রিফ্রেশ হবে।
2. ইউজার ইন্টারঅ্যাকশন: যেমন চ্যাট মেসেজ, নোটিফিকেশন, লাইভ ডেটা আপডেটের জন্য SignalR খুবই উপকারী।
3. এফিশিয়েন্ট পুশ নোটিফিকেশন: SignalR ক্লায়েন্ট-সার্ভার দুইপাশেই দ্রুত ও এফিশিয়েন্টভাবে ডেটা পাঠানোর সুবিধা প্রদান করে।
4. স্কেলেবিলিটি: SignalR স্কেলেবল, এবং এটি একাধিক ক্লায়েন্টের সাথে সঠিকভাবে যোগাযোগ স্থাপন করতে পারে।

২. SignalR সার্ভার সাইড (ASP.Net Core)

ASP.Net Core SignalR ইনস্টল ও কনফিগার করা শুরু করার আগে, প্রথমে SignalR NuGet প্যাকেজ ইনস্টল করতে হবে।

SignalR ইনস্টল করা

NuGet প্যাকেজ ইনস্টল:

dotnet add package Microsoft.AspNetCore.SignalR

SignalR হাব তৈরি করা

SignalR হাব হলো একটি ক্লাস যা সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম যোগাযোগের জন্য ব্যবহৃত হয়।

ChatHub.cs:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // ক্লায়েন্ট থেকে সার্ভারে মেসেজ পাঠানো এবং সার্ভারের মাধ্যমে অন্যান্য ক্লায়েন্টদের আপডেট পাঠানো
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

SignalR সার্ভার কনফিগারেশন

Startup.cs ফাইলে SignalR কনফিগার করুন:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();  // SignalR সার্ভিস যোগ করা
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub");  // হাব মেপিং করা
    });
}

এখানে ChatHub হল SignalR হাব ক্লাস, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ পরিচালনা করে।

৩. SignalR ক্লায়েন্ট সাইড (Angular/React)

১. Angular ক্লায়েন্ট সাইড কনফিগারেশন

Angular এ SignalR ইন্টিগ্রেট করতে, SignalR এর জন্য NuGet প্যাকেজ ইনস্টল করতে হবে:

npm install @microsoft/signalr --save

signalr.service.ts: SignalR এর সাথে যোগাযোগ করার জন্য একটি সার্ভিস তৈরি করুন।

import { Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: HubConnection;

  constructor() {
    this.hubConnection = new HubConnectionBuilder()
      .withUrl('https://localhost:5001/chathub')  // SignalR সার্ভারের URL
      .build();

    this.hubConnection.on('ReceiveMessage', (user: string, message: string) => {
      console.log(`${user}: ${message}`);
    });
  }

  public startConnection() {
    this.hubConnection.start().catch(err => console.error(err));
  }

  public sendMessage(user: string, message: string) {
    this.hubConnection.invoke('SendMessage', user, message)
      .catch(err => console.error(err));
  }
}

app.component.ts: SignalR সার্ভিস ব্যবহার করে মেসেজ পাঠান।

import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signalr.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private signalRService: SignalRService) {}

  ngOnInit() {
    this.signalRService.startConnection();
  }

  sendMessage() {
    this.signalRService.sendMessage('User', 'Hello, SignalR!');
  }
}

২. React ক্লায়েন্ট সাইড কনফিগারেশন

React এ SignalR ব্যবহারের জন্য প্রথমে @microsoft/signalr প্যাকেজ ইনস্টল করতে হবে:

npm install @microsoft/signalr --save

SignalRService.js: SignalR সার্ভিস তৈরি করুন।

import { HubConnectionBuilder } from '@microsoft/signalr';

class SignalRService {
  constructor() {
    this.connection = new HubConnectionBuilder()
      .withUrl("https://localhost:5001/chathub")
      .build();

    this.connection.on("ReceiveMessage", (user, message) => {
      console.log(`${user}: ${message}`);
    });
  }

  startConnection() {
    this.connection.start().catch((err) => console.error(err));
  }

  sendMessage(user, message) {
    this.connection
      .invoke("SendMessage", user, message)
      .catch((err) => console.error(err));
  }
}

export default new SignalRService();

App.js: SignalR সার্ভিস ব্যবহার করুন এবং মেসেজ পাঠান।

import React, { useEffect } from 'react';
import SignalRService from './SignalRService';

function App() {
  useEffect(() => {
    SignalRService.startConnection();
  }, []);

  const sendMessage = () => {
    SignalRService.sendMessage("User", "Hello from React!");
  };

  return (
    <div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
}

export default App;

৪. SignalR এর সাথে Angular/React ব্যবহারের উপকারিতা

1. রিয়েল-টাইম ইন্টারঅ্যাকশন: ক্লায়েন্ট এবং সার্ভারের মধ্যে দ্রুত ডেটা আদান-প্রদান।
2. সাধারণ HTTP রিকোয়েস্টের চেয়ে দ্রুত: SignalR ওয়েবসোকেট ব্যবহার করে পুশ নোটিফিকেশন এবং রিয়েল-টাইম আপডেট সরবরাহ করে।
3. স্কেলেবল: একাধিক ক্লায়েন্টের সাথে কাজ করার জন্য উপযুক্ত।
4. ইউজার ইন্টারফেসে ডাইনামিক আপডেট: Angular বা React অ্যাপ্লিকেশনগুলির ইন্টারফেস রিয়েল-টাইমে আপডেট করা যায়।

SignalR এর মাধ্যমে আপনি ASP.Net Core এবং Angular/React অ্যাপ্লিকেশনগুলোর মধ্যে রিয়েল-টাইম যোগাযোগ সহজেই প্রতিষ্ঠা করতে পারেন, যা আধুনিক ওয়েব অ্যাপ্লিকেশনে অত্যন্ত গুরুত্বপূর্ণ।